Adwaita: avoid border clash on transitioning adiacent flat buttons

Flat buttons gets the button decoration on hover, while transitioning
the decorations of adiacent flat buttons are both shown (one fading in
and the other fading out) so the borders clashes, since normally there's
no spacing between them, to avoid it the transition on the normal state
is set to none and added back to the hover state, so the decoration
won't fade out. To make the transition more evident the duration is
increased.

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 34b69a53ae05c7ba8b9ed02b97c8b499fc00293e..361f00ab21c01d13b99da5fc0e56d68c697b8773 100644 (file)
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -428,12 +428,27 @@ $_dot_color: if($variant=='light', $selected_bg_color,
 
 
 .button {
+
+  $_button_transition: all 200ms ease-out;
+
   border: 1px solid;
   border-radius: 3px;
-  transition: all 200ms ease-out;
   padding: 5px 8px 6px;
+  transition: $_button_transition;
   @include button(normal);
-  &.flat { @include button(undecorated); }
+  &.flat {
+    @include button(undecorated);
+    // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
+    // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
+    // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
+    // in this case the duration is increased.
+    transition: none;
+    &:hover {
+      transition: $_button_transition;
+      transition-duration: 500ms;
+      &:active { transition: $_button_transition; }
+    }
+  }
   &:hover {
     @include button(hover);
     -gtk-image-effect: highlight;

diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 707f8a03213169562b050183cd27dec24f08b107..53d1d4780c061940dc492a775bdb9e6ee3eecd16 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -390,8 +390,8 @@ GtkTextView {
 GtkCalendar.header .button.titlebutton {
   border: 1px solid;
   border-radius: 3px;
-  transition: all 200ms ease-out;
   padding: 5px 8px 6px;
+  transition: all 200ms ease-out;
   color: #eeeeec;
   outline-color: rgba(238, 238, 236, 0.3);
   border-color: #1c1f1f;
@@ -407,7 +407,17 @@ GtkCalendar.header .button.titlebutton {
     background-image: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
     text-shadow: none;
-    icon-shadow: none; }
+    icon-shadow: none;
+    transition: none; }
+    .button.flat:hover, .header-bar .titlebutton.button:hover,
+    .titlebar .titlebutton.button:hover,
+    GtkCalendar.header .titlebutton.button:hover {
+      transition: all 200ms ease-out;
+      transition-duration: 500ms; }
+      .button.flat:hover:active, .header-bar .titlebutton.button:hover:active,
+      .titlebar .titlebutton.button:hover:active,
+      GtkCalendar.header .titlebutton.button:hover:active {
+        transition: all 200ms ease-out; }
   .button:hover, .header-bar .button.titlebutton:hover,
   .titlebar .button.titlebutton:hover,
   GtkCalendar.header .button.titlebutton:hover {
@@ -1892,13 +1902,13 @@ GtkTreeView.view {
   -GtkTreeView-tree-line-width: 1;
   -GtkTreeView-tree-line-pattern: '';
   -GtkTreeView-expander-size: 16;
-  border-left-color: rgba(238, 238, 236, 0.5);
+  border-left-color: #292929;
   border-top-color: #393f3f; }
   GtkTreeView.view:selected, GtkTreeView.view:backdrop:selected {
-    border-left-color: rgba(255, 255, 255, 0.5);
+    border-left-color: #225d9c;
     border-top-color: rgba(238, 238, 236, 0.1); }
   GtkTreeView.view:backdrop {
-    border-left-color: rgba(201, 203, 201, 0.5);
+    border-left-color: #393f3f;
     border-top: #393f3f; }
   GtkTreeView.view.expander {
     -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");

diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 1d73d9076dcf907930faab95614ef478c45b85d9..77defbeea42174798c985c4a88573896e86f76cf 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -382,8 +382,8 @@ GtkTextView {
 GtkCalendar.header .button.titlebutton {
   border: 1px solid;
   border-radius: 3px;
-  transition: all 200ms ease-out;
   padding: 5px 8px 6px;
+  transition: all 200ms ease-out;
   color: #2e3436;
   outline-color: rgba(46, 52, 54, 0.3);
   border-color: #a1a1a1;
@@ -399,7 +399,17 @@ GtkCalendar.header .button.titlebutton {
     background-image: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
-    icon-shadow: none; }
+    icon-shadow: none;
+    transition: none; }
+    .button.flat:hover, .header-bar .titlebutton.button:hover,
+    .titlebar .titlebutton.button:hover,
+    GtkCalendar.header .titlebutton.button:hover {
+      transition: all 200ms ease-out;
+      transition-duration: 500ms; }
+      .button.flat:hover:active, .header-bar .titlebutton.button:hover:active,
+      .titlebar .titlebutton.button:hover:active,
+      GtkCalendar.header .titlebutton.button:hover:active {
+        transition: all 200ms ease-out; }
   .button:hover, .header-bar .button.titlebutton:hover,
   .titlebar .button.titlebutton:hover,
   GtkCalendar.header .button.titlebutton:hover {
@@ -1884,13 +1894,13 @@ GtkTreeView.view {
   -GtkTreeView-tree-line-width: 1;
   -GtkTreeView-tree-line-pattern: '';
   -GtkTreeView-expander-size: 16;
-  border-left-color: rgba(46, 52, 54, 0.5);
+  border-left-color: #fdfdfd;
   border-top-color: #ededed; }
   GtkTreeView.view:selected, GtkTreeView.view:backdrop:selected {
-    border-left-color: rgba(255, 255, 255, 0.5);
+    border-left-color: #4a90d9;
     border-top-color: rgba(46, 52, 54, 0.1); }
   GtkTreeView.view:backdrop {
-    border-left-color: rgba(84, 89, 90, 0.5);
+    border-left-color: #ececec;
     border-top: #ededed; }
   GtkTreeView.view.expander {
     -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");